{{ define "chapter/index4.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h3>ajax文件上传</h3>
<form enctype="multipart/form-data">
    <input type="file" name="file" class="file"> <br>
    <input type="file" name="file" class="file"> <br>
    <input type="text" id="name"> <br>
    <input type="button" value="提交" id="btn-upload">
</form>
<script>
    var btn_upload = document.getElementById("btn-upload");
    btn_upload.onclick = function (ev) {
        var form_data = new FormData();
        var file_tag = document.getElementsByClassName("file");
        console.log(file_tag);
        for (var i = 0; i < file_tag.length; i++) {
            var file = file_tag[i].files[0]
            form_data.append("file", file)
        }
        // var files_tag = $(".file");
        var name = document.getElementById("name").value;
        // form_data.append("file",$("#file")[0].files[0]);
        form_data.append("name", name);
        console.log(form_data);
        if (typeof $ !== 'undefined') {
            $.ajax({
                url: "/doupload4",
                type: "POST",
                data: form_data,
                contentType: false,
                processData: false,
                success: function (data) {
                    alert(data["code"]);
                    alert(data["msg"]);
                    // alert("文件上传成功！");
                    window.location.href = "/toupload4"
                },

                error: function (err) {
                    console.log(err)
                }
            });
        } else {
            console.error('jQuery is not defined');
        }
    }
</script>
</body>
</html>
{{end}}